<template>
	<view>
		<view class="page_header"></view>
		<!-- food详情 -->
		<view class="food_details">
			<view class="header flex">
				<image :src="info.rpicture" mode=""></image>
				<view class="content">
					<view class="info flex">
						<view class="info_header">
							<view class="name">
								{{this.info.fname}}
							</view>
							<view class="instroduction textHd">
								<view class="">
									{{this.info.shopAddress}}
								</view>
								<view class="">
									店铺评分{{this.info.shopScore}}
								</view>
							</view>
						</view>
						<view class="btn" @click.stop="navtoElm">
							详情
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tab -->
		<view class="tab">
			<u-tabs active-color="#b22726" :list="tabList" :is-scroll="false" :current="current" @change="tabschange"></u-tabs>
		</view>
		<!-- 菜品 -->
		<view class="foods" v-show="(current == 0)">
			   <u-empty v-show="(this.foodList.length == 0)" mode="list" text="菜品为空" marginTop="240"></u-empty>
			<FoodList :list="foodList" :tag="true"></FoodList>
		</view>
		<!-- 评论 -->
		<view class="comment" v-show="(current == 1)">
		  <view class="header flex">
		  	 <text>全部评论({{total}})</text>
		  		 <view class="sendComment" @click="navtoSendComment">
		  			 	发表评论
		  		</view>
		  </view>
		    <u-empty v-show="(this.commentList.length == 0)" mode="list" text="评论为空" marginTop="240"></u-empty>
		 <FoodsComment :list="commentList"></FoodsComment>
		</view>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	import { getFoodsDetails } from '../../api/foods.js'
	import FoodsComment from '../../components/foods_comments'
	import FoodList from '../../components/foodList.vue'
	export default {
		data() {
			return {
				tabList: [{name: '菜品' }, {name: '评论'}],
				current: 0,
				id: '',
				total: 0,
				foodList: [],
				commentList: [],
				info: {},
				params: {
					foodpageNum: 1,foodpageSize: 6,pageNum: 1,pageSize: 6,rid: ''
				}
			};
		},
		components: {
			FoodList,FoodsComment
		},
		onLoad(e) {
		  this.params.rid = e.id
		},
		mounted() {
			this.getStoreDetails()
		},
		onReachBottom() {
			if (this.current == 0) {
				this.params.foodpageNum ++
			} else {
				this.params.pageNum ++
			}
			this.getMore()
		},
		methods: {
			// 获取店铺详情
			async getStoreDetails () {
				const res = await getFoodsDetails(this.params)
				this.foodList = res.data.data.foodList
				this.commentList = res.data.data.comment
				this.commentList.map((item, index) => {
					item.releasetime = item.releasetime.slice(0, 16)
				})
				this.info = res.data.data.restaurant
				this.total = res.data.data.total
			},
			// 获取更多
			async getMore () {
				const res = await getFoodsDetails(this.params)
				if (res.data.data.foodList && res.data.data.comment) {
					this.foodList = [...this.foodList, ...res.data.data.foodList]
					this.commentList = [...this.commentList, ...res.data.data.comment]
					this.commentList.map((item, index) => {
						item.releasetime = item.releasetime.slice(0, 16)
					})
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						title: '没有更多数据了'
					});
				}
			},
			// tab选择的确认
			tabschange(e) {
				this.current = e
				this.params.foodpageNum =  1
				this.params.pageNum = 1
			},
			// 跳转到饿了么
			navtoElm () {
				// window.location.href = 
			},
			// 跳转到发表评论
			navtoSendComment () {
				uni.navigateTo({
					url: `../sendComments/sendComments?id=${this.params.rid}&tag=1`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_header {
		background-color: $theme-color;
		color: #fff;
		height: 180rpx;
}
.food_details {
	width: 700rpx;
	border-radius: 24rpx 24rpx 0 0;
	margin: -120rpx auto 0 auto;
	background-color: #fff ;
	padding: 18rpx;
	.header {
		justify-content: space-between;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
		}
		.content {
			width: 560rpx;
			.info {
				.info_header {
					width: 400rpx;
					.instroduction {
						color: #999;
						font-size: 20rpx;
						view {
							line-height: 42rpx;
							}
					}
				}
			}
			.btn {
				width: 140rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
				background-color: $theme-color;
				color: #fff;
				border-radius: 18rpx;
			}
		}
		.special {
			color: #999;
			font-size: 24rpx;
		}
	}
}
/* tabs */
.tab {
	line-height: 72rpx;
	}
/* 评论 */
.comment {
	padding: 18rpx;
	background-color: #fff;
	.header {
		color: #999;
		color: 28rpx;
		line-height: 72rpx;
		padding-right: 12rpx;
		justify-content: space-between;
		.sendComment {
			background-color: $theme-color;
			color: #fff;
			background-color: 1rpx solid $theme-color;
			font-weight: bold;
			width: 160rpx;
			text-align: center;
			border-radius: 18rpx;
		}
	}
}
</style>
